<template>
  <div class="demo">
    <Row type="flex" justify="center" class="header-row">
      <Col span="8" class="header"></Col>
    </Row>

    <Row type="flex" justify="center" class="content-row">
      <Col span="8">
        <Layout>
          <Content class="content">
            <Card class="card">
              <br />--------------------------------------
              <br />--------------------------------------
              <br />--------------------------------------
              <br />--------------------------------------
              <br />--------------------------------------
              <br />--------------------------------------
              <br />--------------------------------------
            </Card>
          </Content>
        </Layout>
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  name: "demo"
};
</script>

<style scoped>
.demo {
  background-color: #eeeeee;
}
.header-row {
  background-color: #ee66ee;
  padding: 10px 0 10px 0;
}
.header {
  height: 150px;
  background-color: #55eeee;
}
.content-row {
  background-color: #7777ee;
  padding: 10px 0 10px 0;
}
.content {
  display: flex;
  justify-content: center;
  background-color: #eeeeee;
  padding: 10px 0 10px 0;
}
.card {
  border-radius: 30px;
}
</style>